<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const arr = [
        { id: "29", pid: "", name: "总裁办" },
        { id: "2c", pid: "", name: "财务部" },
        { id: "2d", pid: "2c", name: "财务核算部" },
        { id: "2f", pid: "2c", name: "薪资管理部" },
        { id: "d2", pid: "", name: "技术部" },
        { id: "d3", pid: "d2", name: "Java研发部" },
      ];

      function transDataToTree(arr) {
        const map = {};
        const new_arr = [];
        arr.forEach((item) => {
          // 添加children属性
          if (!item.children) {
            item.children = [];
          }
          // 建立map映射对象,键为id,值为每一个对象item
          // 给对象添加属性
          map[item.id] = item;
          // map里面储存的对象和数组里面的对象指向的是同一个对象,指向同一个地址
        });

        //   形成树状结构 ,找出父子级关系
        arr.forEach((item) => {
          // 父子级区别在于pid是否有值,而pid和父级的id相同
          // 找出父级
          const parent = map[item.pid];
          console.log("parent", parent);
          // 判断
          if (parent) {
            // 如果有item.pid值,则说明这个item是子集对象,该item.pid刚好对应为父级数据的键名,所以得到的parent有值为其父级对象,该item为子集数据,将其加入到children数组中,形成了父子级的层级结构
            parent.children.push(item);
          } else {
            // 如果没有pid值,则parent为undefined,则该item为父级对象,直接存入新数组
            new_arr.push(item);
          }
        });
        console.log("map", map);
        console.log("new_arr", new_arr);
        return new_arr;
      }
      console.log("transDataToTree", transDataToTree(arr));
      console.log("arr", arr);
    </script>
  </body>
</html>
